import { Button } from 'antd';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { PageContainer } from '@ant-design/pro-layout';

const valueEnum = {
    0: 'close',
    1: 'running',
    2: 'online',
    3: 'error',
};

export type TableListItem = {
    key: number;
    name: string;
    containers: number;
    creator: string;
    status: string;
    createdAt: number;
    memo: string;
};
const tableListDataSource: TableListItem[] = [];

const creators = ['付小小', '曲丽丽', '林东东', '陈帅帅', '兼某某'];

for (let i = 0; i < 5; i += 1) {
    tableListDataSource.push({
        key: i,
        name: 'AppName',
        containers: Math.floor(Math.random() * 20),
        creator: creators[Math.floor(Math.random() * creators.length)],
        status: valueEnum[Math.floor(Math.random() * 10) % 4],
        createdAt: Date.now() - Math.floor(Math.random() * 100000),
        memo: i % 2 === 1 ? '很长很长很长很长很长很长很长的文字要展示但是要留下尾巴' : '简短备注文案',
    });
}

const columns: ProColumns<TableListItem>[] = [
    {
        title: '流程类别',
        width: 80,
        dataIndex: 'name',
        valueEnum: {
            all: { text: '全部', status: 'Default' },
            open: {
              text: '未解决',
              status: 'Error',
            },
            closed: {
              text: '已解决',
              status: 'Success',
              disabled: true,
            },
            processing: {
              text: '解决中',
              status: 'Processing',
            },
          },
        render: (_) => <a>{_}</a>,
    },
    {
        title: '流程名称',
        dataIndex: 'containers',
        width: 100,
    },
    {
        title: '编号',
        width: 80,
        dataIndex: 'status',

    },
    {
        title: '标题名称',
        width: 80,
        dataIndex: 'creator',
    },
    {
        title: '状态',
        width: 140,
        dataIndex: 'createdAt',
        search: false,
    },
    {
        title: '紧急程序',
        width: 140,
        dataIndex: 'createdAt',
        search: false,
    },
    {
        title: '申请时间',
        width: 140,
        dataIndex: 'createdAt',
        valueType: 'dateTimeRange',
        sorter: (a,b)=> a.createdAt-b.createdAt
    },
    {
        title: '操作',
        width: 180,
        key: 'option',
        valueType: 'option',
        render: () => [
            <a key="link">查看详情</a>,
            <a key="link">查看流程图</a>,
            <a key="link">撤销申请</a>,
        ],
    },
   
];

export default () => {
    return (
        <PageContainer>
            <ProTable<TableListItem>
                columns={columns}
                request={(params, sorter, filter) => {
                    return Promise.resolve({
                        data: tableListDataSource,
                        success: true,
                    });
                }}
                rowKey="key"
                dateFormatter="string"
                headerTitle="我的申请"
            />
        </PageContainer>
    );
};